import React from 'react';
import styles from './index.less';
import { history, formatMessage, useIntl, getDvaApp } from 'umi';
import { Button } from 'antd';

export default class extends React.Component {
  state = {
    // url: '',
    // isMedia: false,
    url: 'https://www.bilibili.com/',
    isMedia: true,
  };
  componentDidMount = () => {};
  render() {
    return (
      <div className={styles.page}>
        <div className={styles.header}>
          <Button danger>播放控制</Button>
          <Button danger>加载媒体</Button>
          <Button danger>我的媒体</Button>
        </div>
        <div className={styles.body}>
          {!this.state.isMedia && (
            <div className={styles.textDescribe}>
              <div className={styles.title}>播放控制</div>
              <div className={styles.describe}>
                加载课程，视频或网页，然后从此处进行控制。
              </div>

              <Button
                type="primary"
                className={styles.button}
                onClick={() => {
                  console.log('asd');
                  this.setState({
                    // https://www.bilibili.com/
                    url: 'https://www.bilibili.com/',
                    isMedia: true,
                  });
                }}
              >
                加载媒体
              </Button>
            </div>
          )}
          {this.state.isMedia && (
            <div className={styles.iframeRoot}>
              <iframe src={this.state.url} />
            </div>
          )}
        </div>
      </div>
    );
  }
}
